<template>
  <div>

      <div class="box">

          <!-- // 组件1  头部-->
   <Memberson1 @parentex="parentex"></Memberson1>
    <!-- // 组件2  头部2-->
    <Memberson2 @serchfunparent='serchfunparent'/>
     <!-- // 组件3  中部-->
     <Memberson3  @editlog="editlog" :arr='arr' @operatetion='operatetion'/>
     
      <!-- 组件4  分页  -->
       <Memberson4 @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" :page="page" :pageSize="pageSize" :total='total'/>
 <!-- 组件5  Memberson5  编辑-->
       <Memberson5 :btn="btn" :row="row" @resettable="initGetMember" @operatetionclose="operatetionclose" v-if="show"></Memberson5>
      </div>

  </div>
</template>

<script>
import Memberson1  from './components/Memberson1.vue'
import Memberson2  from './components/Memberson2.vue'
import Memberson3  from './components/Memberson3.vue'
import Memberson4  from './components/Memberson4.vue'
import Memberson5  from './components/Memberson5.vue'
import {getMemberApi} from '../../api/MemberApi'
import Page from '../user/components/page.vue'
import { export_json_to_excel } from '../../utils/ExcelUtils'
export default {
   components:{
    Memberson1,
    Memberson2,
    Memberson3,
    Memberson4,
    Memberson5,
},
   data(){
    return{
      show:false,
      btn:0,
      row:{},
      arr:[],
      keyword:'',
      page:1,
      pageSize:15,
      total:0
    }
   },
   mounted() {
      this.initGetMember()
   },
   methods: {

        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                return v[j]
            }))
        },
     parentex(){
      //导出excel
       //自定义的头部
        const tHeader =  ['卡号','会员类型','会员等级','会员姓名', '手机号码', '累积消费', '储存余额','累积储值','积分','开卡时间','到期时间']
        //自定义的字段
        const filterVal = ['card', 'viptype','rank', 'name', 'number', 'consumption','balance','accrual','integral','opening','expiration']

        const data = this.formatJson(filterVal,this.arr)
      //   getHomeApi({keyword:'',page:1,pageSize:10}).then(res=>{
      //     if(res.code == 200){
      //         //根据自定义字段 筛选我需要的值
      //        const data = this.formatJson(filterVal,res.data)
            	export_json_to_excel({
    		          header: tHeader,//excel头部列表
                  data,//数据
                  filename: '测试文件',//文件名称
                  autoWidth: true,//自适应宽
                  bookType: 'xlsx'//文件类型
    		     })
      //     }
      //   })
    	
    },
    serchfunparent(val){
        this.keyword = val 
        this. initGetMember()
    },


    handleCurrentChange(val){
        this.page = val
        this.initGetMember()
    },

    handleSizeChange(val){
       this.pageSize = val
       this.initGetMember()
    },
    
     editlog(row){
     this.row = row,
     this.show=true
     this.btn=1
      
    //  console.log(111);
    },
    operatetionclose(){
         this.show=false
    },
       initGetMember(){
          getMemberApi({keyword:this.keyword,page:this.page,pageSize:this.pageSize}).then(res=>{
            //发送ajax请求
            console.log(res);
            if(res.code==200){
              this.arr = res.data
              this.total = res.total
            }
          })
       },
       operatetion(){
        //操作弹框
        this.show=true,
        this.row={}
        this.btn=0
       },
   },
}
</script>

<style lang="less" scoped>
     .box{
        height: 100%;
        
        background-color: #FFFFFF;
        // margin: auto;
        border-radius:15px;
        
        padding: 20px;
        overflow: hidden;
     }
</style>